<#include "/common/layout.ftl">


<@layout>
    <div class="frame-content" style="background: white;">

        <div class="card">
            <div class="card-body">

                <ul id="myTabs" class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab">表单列表</a></li>
                    <li><a href="#profile" role="tab" id="profile-tab" data-toggle="tab">添加表单</a></li>

                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="home">


                        <table id="tb_departments" class="table"></table>
                    </div>
                    <div class="tab-pane fade" id="profile">
                        <div class="card">
                            <div class="card-header"><h4>水平排列的表单</h4></div>
                            <div class="card-body">
                                <form class="form-horizontal" id="buildForm" action="/admin/form/build_form"
                                      method="post"
                                      onsubmit="return false;">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="widget_id">控件标识</label>
                                        <div class="col-md-7">
                                            <input class="form-control" type="text" id="widget_id" name="name"
                                                   placeholder="请输入空间标识  例如：XX_XX_XX">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="fields_id">表单字段</label>
                                        <div class="col-md-7">
                                            <div class="col-md-9" style="padding: 0;">
                                                <input type="text" readonly class="form-control " id="fields_id"
                                                       name="fields">
                                                <input type="text" readonly class="form-control " id="rules"
                                                       name="formRule">
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button" class="btn btn-primary dropdown-toggle"
                                                        data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                    添加字段
                                                    <span class="caret">
                                        </span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <#list widgetTypes as wdItem>
                                                        <li>
                                                            <a href="#!"
                                                               data-toggle="modal"
                                                               data-target="#exampleModal"
                                                               data-url="/admin/form/create_field?pid=${wdItem.id }&type=${wdItem.value }"
                                                               data-title="创建【${wdItem.title }】">
                                                                ${wdItem.title }
                                                            </a>
                                                        </li>
                                                    </#list>
                                                </ul>
                                            </div>
                                            <hr/>
                                            <div class="panel-group col-md-12" style="padding: 0;" id="accordion"
                                                 role="tablist"
                                                 aria-multiselectable="true">
                                                <div class="panel panel-primary">
                                                    <div class="panel-heading" role="tab" id="headingOne">
                                                        <h4 class="panel-title">
                                                            <a role="button" data-toggle="collapse"
                                                               data-parent="#accordion"
                                                               href="#collapseOne" aria-expanded="true"
                                                               aria-controls="collapseOne">
                                                                表单字段信息
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOne" class="panel-collapse collapse in"
                                                         role="tabpanel"
                                                         aria-labelledby="headingOne">
                                                        <div class="panel-body">
                                                            <table class="table">
                                                                <thead>
                                                                <tr>
                                                                    <th>id</th>
                                                                    <th>name</th>
                                                                    <th>type</th>
                                                                    <th>操作</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody id="fieldTbody">

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="widget_id">提交地址</label>
                                        <div class="col-md-7">
                                            <input class="form-control" type="text" id="widget_id" name="submitUrl"
                                                   placeholder="请填写提交对应的地址">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="view-url">对应的视图</label>
                                        <div class="col-md-7">
                                            <input class="form-control" type="text" id="view-url" name="viewUrl"
                                                   placeholder="请填写对应的视图">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="view-url">映射的Entity</label>
                                        <div class="col-md-7">
                                            <select class="form-control select2" name="mappingEntity">
                                                <option value="-1">--- 请选择要映射的Entity ---</option>
                                                <#list mappingEntityItems as mItm>
                                                    <option value="${mItm }">${mItm }</option>
                                                </#list>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="submit-method">提交方式</label>
                                        <div class="col-md-7">
                                            <label class="lyear-radio radio-success  radio-inline">
                                                <input type="radio" value="GET" name="method">
                                                <span>GET</span>
                                            </label>
                                            <label class="lyear-radio radio-success   radio-inline">
                                                <input type="radio" value="POST" checked name="method">
                                                <span>POST</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="submit-method">是否上传文件</label>
                                        <div class="col-md-7">
                                            <label class="lyear-radio radio-success radio-inline">
                                                <input type="radio" value="1" name="isUpload">
                                                <span>是</span>
                                            </label>
                                            <label class="lyear-radio radio-success  radio-inline">
                                                <input type="radio" checked value="0" name="isUpload">
                                                <span>否</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="widget-desc">表单描述</label>
                                        <div class="col-md-7">
                            <textarea class="form-control" id="widget-desc" name="description"
                                      rows="6" placeholder="内容.."></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-9 col-md-offset-3">
                                            <button class="btn btn-primary" type="submit">创建表单</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>


    </div>
</@layout>
<@style>


</@style>
<@script>
    <script type="text/javascript">


        var fieldTable = [];
        var rules = {};

        function addFiled(fieldInfo) {
            // 生成 bootstrap validate 验证配置
            /* {
                 name: {
                     validators: {
                         notEmpty: {
                             message: '表单标识不能为空'
                         }
                     }
                 }
             }*/
            var rulesTemp = fieldInfo.rules;
            var validateCfg = {};
            validateCfg[fieldInfo.name] = {validators: {}};
            Object.keys(rulesTemp).forEach(function (key) {
                var cfg = validateCfg[fieldInfo.name];
                cfg.validators[key] = {
                    message: rulesTemp[key]
                };
            });
            rules = Object.assign(rules,validateCfg);
            delete fieldInfo.rules;
            fieldTable.push(fieldInfo);
            $('#fieldTbody').append([
                '<tr>',
                '<td>' + fieldInfo.id + '</td>',
                '<td>' + fieldInfo.name + '</td>',
                '<td>' + fieldInfo.type + '</td>',
                '<td><button class="btn btn-primary btn-sm delField" data-index=\'' + (fieldTable.length - 1) + '\' type="button">删除</button></td>',
                '</tr>'
            ].join(","));
            $('input[name=fields]').val(JSON.stringify(fieldTable));
            $('input[name=formRule]').val(JSON.stringify(rules));
        }

        $(document).on('click', '.delField', function () {
            var index = $('.delField').index(this);
            fieldTable.splice(index, 1);
            rules.splice(index, 1);
            $('input[name=fields]').val(fieldTable.length == 0 ? '' : JSON.stringify(fieldTable));
            $('input[name=formRule]').val(rules.length == 0 ? '' : JSON.stringify(rules));
            $(this).parents('tr').remove();
        });

        HsUtils.validateForm('#buildForm', {
            name: {
                validators: {
                    notEmpty: {
                        message: '表单标识不能为空'
                    }
                }
            },
            submitUrl: {
                validators: {
                    notEmpty: {
                        message: '提交地址不能为空'
                    }
                }
            },
            viewUrl: {
                validators: {
                    notEmpty: {
                        message: '提交地址不能为空'
                    }
                }
            }
            ,
            fields: {
                validators: {
                    notEmpty: {
                        message: '字段信息不能为空'
                    }
                }
            }

        }, function (res) {
            HsUtils.refreshFrame();
        });


        HsUtils.initDataTable("#tb_departments", "/admin/form/get_form_list", "#toolbar", [{
            checkbox: true
        }, {
            field: 'id',
            title: '#',sortable: true,
        }, {
            field: 'name',
            title: '标识'
        }, {
            field: 'submitUrl',
            title: '提交地址'
        }, {
            field: 'method',
            title: '提交方式'
        }, {
            field: 'isUpload',
            title: '是否上传文件'
        }, {
            field: 'viewUrl',
            title: '视图路径'
        }, {
            field: 'description',
            title: '描述'
        },
            {
                field: "action",
                title: "操作",
                formatter: function (value, row, index) {
                    return HsUtils.buildTableActionBtn("预览", "primary", "/admin/form/preview_form?preview=true", row.name, row.id)
                }
            }
        ])

    </script>
</@script>

